<!--
 * @Author: wangyu
 * @Date: 2024-12-26 21:49:51
 * @LastEditTime: 2024-12-29 20:54:26
 * @LastEditors: wangyu
 * @Description: 商户详情
 * @FilePath: \dzsq-smartpark-platform\src\views\detailed\components\business.vue
-->
<template>
  <div style="position: relative; height: 100%">
    <comHeaer title="商户（企业详情）"> </comHeaer>
    <div class="businessContent">
      <el-scrollbar style="height: 100%">
        <businessItem
          v-for="(item, index) in list"
          :data="item"
          :key="item.mpId"
          :style="{
            'margin-bottom': index === list.length - 1 ? '16px' : '0px',
            'margin-top': index === 0 ? '16px' : '0px',
          }"
          @click="toActiveSh(item)"
        />
      </el-scrollbar>
    </div>
    <div class="businessLh">
      <div
        v-for="item in props.data"
        :key="item.lh"
        :class="[item.active && 'active']"
        @click="toActive(item)"
      >
        {{ item.lh }}
      </div>
    </div>
    <businessDialog ref="businessDialogRef"></businessDialog>
  </div>
</template>

<script setup>
import { computed } from "vue";
import comHeaer from "../../components/comHeader/index.vue";
import businessItem from "./business-item.vue";
import businessDialog from "./businessDialog.vue";
const businessDialogRef = ref(null);

const props = defineProps({
  data: Array,
});
const list = computed(() => {
  return props.data.filter((item) => {
    return item.active;
  })[0].list;
});

const toActive = (floor) => {
  props.data.forEach((item) => {
    item.active = false;
  });
  floor.active = true;
  const { BuildingID, Floor } = floor;
  eventBus.emit("SelectBuildingFloor", { BuildingID, Floor });
};
const toActiveSh = (sh) => {
  list.value.forEach((item) => {
    item.active = false;
  });
  sh.active = true;
  const { BuildingID, Floor, Unit } = sh;
  // 切换商户门牌三维模型
  eventBus.emit("SelectBuildingUnit", { BuildingID, Floor, Unit });
  businessDialogRef.value.open(sh);
};
</script>
<style scoped lang="scss">
.businessContent {
  height: calc(100% - 58px);
  overflow: hidden;
}
.businessLh {
  position: absolute;
  font-size: 32px;
  right: -106px;
  top: 64px;
  > div {
    color: #07a6ff;
    font-weight: bold;
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin-bottom: 10px;
    background-image: url(@/assets/imgs/u1195.svg);
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
    cursor: pointer;
    &:hover {
      color: #ffffff;
      background: rgba(7, 166, 255, 0.2);
    }
  }
  .active {
    color: #ffffff;
    background-image: url(@/assets/imgs/u1195_selected.svg);
  }
}
</style>
